<?xml version="1.0" encoding="UTF-8"?>
<!--
  ~ Copyright (c) 2014-2015 Luca Agostini, Alessandro Cantini, Alessandro Dignani
  ~
  ~ This file is part of MeteoCal.
  ~
  ~ MeteoCal is free software: you can redistribute it and/or modify
  ~ it under the terms of the GNU General Public License as published by
  ~ the Free Software Foundation, either version 3 of the License, or
  ~ (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful,
  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~ GNU General Public License for more details.
  ~
  ~ You should have received a copy of the GNU General Public License
  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

<composite:interface/>

<composite:implementation>
    <h:form id="notificationsForm">
        <p:dataTable id="notificationsTable" value="#{notificationBean.user.notifications}" var="n"
                     rendered="#{notificationBean.user.notifications.size() != 0}">
            <f:facet name="header">
                Notifications
            </f:facet>

            <p:column id="descriptionColumn" width="65%">
                <f:facet name="header">Description</f:facet>
                <h:outputText value="${n.description}"/>
                <br/>
                <h:panelGroup rendered="#{notificationBean.getAlternativeDate(n) != null}">
                    <h:outputText value="Alternative date: "/>
                    <h:outputText value="#{notificationBean.getAlternativeDate(n)}">
                        <f:convertDateTime pattern="#{notificationBean.dateTimePattern}"
                                           timeZone="#{notificationBean.timeZone}"/>
                    </h:outputText>
                </h:panelGroup>
            </p:column>
            <p:column id="actionColumn" width="35%">
                <f:facet name="header">Action</f:facet>
                <p:commandButton rendered="${n.type == 'INVITATION'}"
                                 value="Accept"
                                 actionListener="#{notificationBean.showConfirmationDialog(n)}"
                                 action="#{calendarBean.init}"
                                 icon="ui-icon-check"
                                 ajax="false"/>

                <p:commandButton rendered="${n.type == 'INVITATION'}"
                                 value="Decline"
                                 actionListener="#{notificationBean.declineInvitationAction(n)}"
                                 action="#{calendarBean.init}"
                                 icon="ui-icon-close"
                                 update=":#{cc.attrs.id}:notificationsForm"/>

                <p:commandButton rendered="#{notificationBean.getAlternativeDate(n) != null}"
                                 value="Change date"
                                 actionListener="#{notificationBean.showConfirmationDialog(n)}"
                                 action="#{calendarBean.init}"
                                 icon="ui-icon-calendar"
                                 ajax="false"/>

                <p:commandButton rendered="${n.type == 'GENERIC' || n.type == 'WEATHER'}"
                                 value="Delete"
                                 actionListener="#{notificationBean.removeNotificationAction(n)}"
                                 icon="ui-icon-close"
                                 update=":#{cc.attrs.id}:notificationsForm"/>
            </p:column>
        </p:dataTable>

        <p:panel id="notificationsEmpty" header="Notifications" toggleable="true"
                 toggleOrientation="horizontal"
                 rendered="#{notificationBean.user.notifications.size() == 0}" style="width: 300px">
            <div id='notifications' style='width: 90%'><img
                    src='/MeteoCal/images/notification_bell.png'
                    alt='There are no notifications. Have a good day!' width='100' height='100'/>

                <p class='center'>There are no notifications.<br/>Have a good day!</p></div>
        </p:panel>
    </h:form>
    <p:confirmDialog showEffect="fade" hideEffect="fade"
                     header="Overlapping event detected"
                     message="You have an event scheduled at the same time, do you want to continue?"
                     widgetVar="notificationsConfirmDialog"
                     icon="ui-icon-alert">
        <h:form>
            <p:commandButton value="Yes"
                             actionListener="#{notificationBean.saveAction()}"
                             action="#{calendarBean.init()}"
                             icon="ui-icon-check"
                             onclick="PF('notificationsConfirmDialog').hide()"
                             ajax="false"/>
            <p:commandButton value="No" icon="ui-icon-close"
                             onclick="PF('notificationsConfirmDialog').hide()"/>
        </h:form>
    </p:confirmDialog>
</composite:implementation>

</html>
